<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #myMap {
            width: 600px;
            height: 600px;
            border: 1px solid red;
        }
    </style>
    <script src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=aF4dfBtsBD209YNrVcj40nWV7Lm4CQb6"></script>
    <script>
        window.onload = function () {
            //创建地图实例对象
            var myMap = new BMapGL.Map('myMap');
            //设置地图中心点和地图级别
            var centerPoint = new BMapGL.Point(104.069944, 30.579012);
            myMap.centerAndZoom(centerPoint, 15);

            //添加地图点击事件
            myMap.addEventListener('click',function(event){
                // console.log('被点击',event.latlng.lng,event.latlng.lat);
                //创建点对象
                var point=new BMapGL.Point(event.latlng.lng,event.latlng.lat);
                //创建消息窗口
                var win=new BMapGL.InfoWindow('消息窗口的内容',{
                    width:200,
                    height:100,
                    title:'标题'
                });
                //将消息框添加到地图
                myMap.openInfoWindow(win,point);
            });
        }
    </script>
</head>

<body>
    <div id="myMap"></div>
</body>

</html>